﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js editor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <link href="Content/css/editor/types.css" rel="stylesheet" />
    <link id="theme" href="Content/css/editor/light.css" rel="stylesheet" />

    <script src="Scripts/threejslib/three.min.js"></script>
    <script src="Scripts/threejslib/libs/system.min.js"></script>

    <script src="Scripts/threejslib/controls/EditorControls.js"></script>
    <script src="Scripts/threejslib/controls/TransformControls.js"></script>
    <script src="Scripts/threejslib/loaders/BabylonLoader.js"></script>
    <script src="Scripts/threejslib/loaders/ColladaLoader.js"></script>
    <script src="Scripts/threejslib/loaders/OBJLoader.js"></script>
    <script src="Scripts/threejslib/loaders/PLYLoader.js"></script>
    <script src="Scripts/threejslib/loaders/SceneLoader.js"></script>
    <script src="Scripts/threejslib/loaders/STLLoader.js"></script>
    <script src="Scripts/threejslib/loaders/UTF8Loader.js"></script>
    <script src="Scripts/threejslib/loaders/VRMLLoader.js"></script>
    <script src="Scripts/threejslib/loaders/VTKLoader.js"></script>
    <script src="Scripts/threejslib/loaders/ctm/lzma.js"></script>
    <script src="Scripts/threejslib/loaders/ctm/ctm.js"></script>
    <script src="Scripts/threejslib/loaders/ctm/CTMLoader.js"></script>
    <script src="Scripts/threejslib/exporters/SceneExporter.js"></script>
    <script src="Scripts/threejslib/exporters/OBJExporter.js"></script>
    <script src="Scripts/threejslib/exporters/STLExporter.js"></script>
    <script src="Scripts/threejslib/renderers/RaytracingRenderer.js"></script>
    <script src="Scripts/threejslib/renderers/SoftwareRenderer.js"></script>
    <script src="Scripts/threejslib/renderers/SVGRenderer.js"></script>

    <!-- WIP -->

    <script src="Scripts/threejslib/exporters/BufferGeometryExporter.js"></script>
    <script src="Scripts/threejslib/exporters/TypedGeometryExporter.js"></script>
    <script src="Scripts/threejslib/exporters/GeometryExporter.js"></script>
    <script src="Scripts/threejslib/exporters/MaterialExporter.js"></script>
    <script src="Scripts/threejslib/exporters/ObjectExporter.js"></script>
    <script src="Scripts/threejslib/renderers/WebGLRenderer3.js"></script>

    <script src="Scripts/editor/libs/signals.min.js"></script>
    <script src="Scripts/editor/libs/ui.js"></script>
    <script src="Scripts/editor/libs/ui.editor.js"></script>
    <script src="Scripts/editor/libs/ui.three.js"></script>
    <script src="Scripts/editor/Storage.js"></script>

    <script src="Scripts/editor/Editor.js"></script>
    <script src="Scripts/editor/Config.js"></script>
    <script src="Scripts/editor/Loader.js"></script>
    <script src="Scripts/editor/Menubar.js"></script>
    <script src="Scripts/editor/Menubar.File.js"></script>
    <script src="Scripts/editor/Menubar.Edit.js"></script>
    <script src="Scripts/editor/Menubar.Add.js"></script>
    <script src="Scripts/editor/Menubar.View.js"></script>
    <script src="Scripts/editor/Menubar.Help.js"></script>
    <script src="Scripts/editor/Sidebar.js"></script>
    <script src="Scripts/editor/Sidebar.Renderer.js"></script>
    <script src="Scripts/editor/Sidebar.Scene.js"></script>
    <script src="Scripts/editor/Sidebar.Object3D.js"></script>
    <script src="Scripts/editor/Sidebar.Animation.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.Geometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.BufferGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.BoxGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.CircleGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.CylinderGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.IcosahedronGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.PlaneGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.SphereGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.TorusGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Geometry.TorusKnotGeometry.js"></script>
    <script src="Scripts/editor/Sidebar.Material.js"></script>
    <script src="Scripts/editor/Toolbar.js"></script>
    <script src="Scripts/editor/Viewport.js"></script>

    <script>

        window.URL = window.URL || window.webkitURL;
        window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;

        var editor = new Editor();

        var viewport = new Viewport(editor).setId('viewport');
        document.body.appendChild(viewport.dom);

        var toolbar = new Toolbar(editor).setId('toolbar')
        document.body.appendChild(toolbar.dom);

        var menubar = new Menubar(editor).setId('menubar');
        document.body.appendChild(menubar.dom);

        var sidebar = new Sidebar(editor).setId('sidebar');
        document.body.appendChild(sidebar.dom);

        //
        var theme = editor.config.getKey('theme');

        editor.setTheme(theme);

        editor.storage.init(function () {

            editor.storage.get(function (state) {

                if (state !== undefined) {

                    var loader = new THREE.ObjectLoader();
                    var scene = loader.parse(state);

                    editor.setScene(scene);

                }

                var selected = editor.config.getKey('selected');

                if (selected !== undefined) {

                    editor.selectByUuid(selected);

                }

            });

            //

            var timeout;
            var exporter = new THREE.ObjectExporter();

            var saveState = function (scene) {

                clearTimeout(timeout);

                timeout = setTimeout(function () {

                    editor.storage.set(exporter.parse(editor.scene));

                }, 1000);

            };

            var signals = editor.signals;

            signals.objectAdded.add(saveState);
            signals.objectChanged.add(saveState);
            signals.objectRemoved.add(saveState);
            signals.materialChanged.add(saveState);
            signals.sceneGraphChanged.add(saveState);

        });

        //

        document.addEventListener('dragover', function (event) {

            event.preventDefault();
            event.dataTransfer.dropEffect = 'copy';

        }, false);

        document.addEventListener('drop', function (event) {

            event.preventDefault();
            editor.loader.loadFile(event.dataTransfer.files[0]);

        }, false);

        document.addEventListener('keydown', function (event) {

            switch (event.keyCode) {

                case 8: // prevent browser back
                    event.preventDefault();
                    break;
                case 46: // delete
                    var parent = editor.selected.parent;
                    editor.removeObject(editor.selected);
                    editor.select(parent);
                    break;

            }

        }, false);

        var onWindowResize = function (event) {

            editor.signals.windowResize.dispatch();

        };

        window.addEventListener('resize', onWindowResize, false);

        onWindowResize();

    </script>
</body>
</html>
